<template>
  <!--  <iframe :src="addr" style="width: 100% ;height: 100%; border: none"></iframe>-->
  <!--抽屉组件-->
  <div class="outClass">
    <!--    <el-drawer-->
    <!--      class="drawerClass"-->
    <!--      :append-to-body="true"-->
    <!--      :modal="drawerModal"-->
    <!--      :size="widthSize"-->
    <!--      :show-close="drawerShowClose"-->
    <!--      :wrapperClosable="false"-->
    <!--      :visible.sync="drawer"-->
    <!--      direction="ltr"-->
    <!--      :modal-append-to-body="true"-->
    <!--      :withHeader="false"-->
    <!--    >-->
    <!--    </el-drawer>-->
    <div class="myDraLayOut">
      <div class="resizableRowDrawer" :style="getComponentStyle(drawerRender.render, rowIndex)"  :key="'rowIndex_'+rowIndex" v-for="(rowIndex) in Number(drawerRender.row)">
        <div class="resizableRowContentDrawer" >
          <div class="resizableColDrawer" :key="rowIndex+'_colIndex_'+colIndex" v-for="(colIndex) in Number(drawerRender.col)">
            <div class="resizableColContentDrawer">
              <component :is="getSubComponent(drawerRender.render, rowIndex, colIndex)"
                         v-bind="getSubComponentParams(drawerRender.render, rowIndex, colIndex)"
                         v-on="getSubComponentEvent(drawerRender.render, rowIndex, colIndex)" :multiple="false">
                <span v-html="getSubComponentHtml(drawerRender.render, rowIndex, colIndex)"></span>
              </component>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--抽屉按钮-->
    <div :class="[drawer ? 'imgright' : 'imgright1']"
         style="
              width: 15px;
              position: absolute;
              z-index: 999999999;
              top:45%;"
         @click="clickImg"
    >
      <img
        v-show="!drawer"
        :src="require('@/assets/img/drawer/drawerRight.png')"
        style="height: 54.4px; width: 12px">
      <img
        v-show="drawer"
        :src="require('@/assets/img/drawer/drawerLeft.png')"
        style="height: 54.4px; width: 12px">
    </div>
  </div>
</template>
<script>
import baseComp from "./baseComp";

export default {
  name: "myDrawer",
  extends: baseComp,
  props: ["myData", "drawerRender"],
  watch: {
    myData: {
      handler(val) {
        this.getData();
      },
      immediate: true,  //刷新加载 立马触发一次handler
      deep: true
    },
    drawerRender: {
      handler(val) {
      },
      immediate: true,  //刷新加载 立马触发一次handler
      deep: true
    }
  },
  data: function () {
    return {
      widthSize: '50%',
      drawer: true,
      drawerModal: false,
      drawerShowClose: false,
      drawerStyle: "",
      resizableRowDrawerStyle:{},
    }
  },
  mounted() {
    this.chageContainer();
    this.getData();
    this.setDrawerClassStyle()
  },
  methods: {
    //改变布局样式
    chageContainer(){
      this.executeEvent("chageContainer", this.path, this);
    },
    setDrawerClassStyle() {
      // let querySelector = document.querySelector(".drawerClass");
      // querySelector.style.width = "17.2%";
    },
    clickImg() {
      this.drawer = !this.drawer;
      this.executeEvent("clickImg", this.path, this.drawer);
    },
    getData() {
      // this.widthSize = this.myData.widthSize;
      // this.drawerModal = this.myData.drawerModal;
      // this.drawerShowClose = this.myData.drawerShowClose;
    },
    getSubComponent(dataList, rowIndex, colIndex) {
      let component = dataList.find(item => (item.rowNum == '*' || item.rowNum == rowIndex) && item.colNum == colIndex);
      return this.getComponent(component);
    },
    /**
     * 获取组件渲染参数
     * @param rowIndex  this.toolbar.custom.render
     * @param colIndex
     * @returns {string|*}
     */
    getSubComponentParams(dataList, rowIndex, colIndex) {
      let component = dataList.find(item => (item.rowNum == '*' || item.rowNum == rowIndex) && item.colNum == colIndex);
      return this.getComponentParams(component);
    },
    /**
     * 获取组件事件
     */
    getSubComponentEvent(dataList, rowIndex, colIndex) {
      let component = dataList.find(item => (item.rowNum == '*' || item.rowNum == rowIndex) && item.colNum == colIndex);
      return this.getComponentEvent(component);
    },
    /**
     * 获取组件html
     */
    getSubComponentHtml(dataList, rowIndex, colIndex) {
      let component = dataList.find(item => (item.rowNum == '*' || item.rowNum == rowIndex) && item.colNum == colIndex);
      return this.getComponentHtml(component);
    },
    /**
     * 获取组件样式 this.toolbar.custom.render
     * @param rowIndex
     * @param colIndex
     * @returns {{width: *, height: *}}
     */
    getComponentStyle(dataList, rowIndex) {
      let component = dataList.find(item => (item.rowNum == '*' || item.rowNum == rowIndex) && item.colNum == 1);
      if (component) {
        let style = {};
        if (component.width) {
          if (component.width.indexOf("%") >= 0) {
            style.width = component.width;
          } else {
            style.width = component.width + "px";
          }
        }
        if (component.height) {
          if (component.height.indexOf("%") >= 0) {
            style.height = component.height;
          } else {
            style.height = component.height + "px";
          }
        }
        if (component.minWidth) {
          if (component.minWidth.indexOf("%") >= 0) {
            style.minWidth = component.minWidth;
          } else {
            style.minWidth = component.minWidth + 'px';
          }
        }
        if (component.minHeight) {
          if (component.minHeight.indexOf("%") >= 0) {
            style.minHeight = component.minHeight;
          } else {
            style.minHeight = component.minHeight + "px";
          }
        }
        return style;
      }
    },
    /**
     * 设置指定布局组件div宽度为0
     * @param commp 需要调整的组件实例
     * @param direction 需要缩放的方向 ，e、s、w、n ，分为东南西北
     */
    setSpecifyCommpWidthToZero(commp, direction){
      let layoutDiv = commp.$el.parentNode.parentNode;
      //生成jquery对象
      let layoutJq = jQuery(layoutDiv);

      //找layoutJq的第一个兄弟节点
      let sibling;
      if (!direction || direction == 'e' || direction == 's' ){
        sibling = layoutJq.next();
        if(direction == 'e'){
          //获取当前布局组件div的宽度
          //最小宽度
          let minWidth = layoutJq.attr("min-width");
          let outerWidth = layoutJq.outerWidth();
          //设置layoutJq的宽度为0
          layoutJq.width(minWidth ? minWidth : 0);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.width(sibling.width() + outerWidth);
        }else {
          //最小宽度
          let minHeight = layoutJq.attr("min-height");
          let outerHeight = layoutJq.outerHeight();
          //设置layoutJq的宽度为0
          layoutJq.height(minHeight ? minHeight : 0);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.height(sibling.height() + outerHeight);
        }
      }
      //方向为 w 和 n的延展
      else {
        sibling = layoutJq.prev();
        if(direction == 'w'){
          //获取当前布局组件div的宽度
          //最小宽度
          let minWidth = layoutJq.attr("min-width");
          let outerWidth = layoutJq.outerWidth();
          //设置layoutJq的宽度为0
          layoutJq.width(minWidth ? minWidth : 0);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.width(sibling.width() + outerWidth);
        }else {
          //最小宽度
          let minHeight = layoutJq.attr("min-height");
          let outerHeight = layoutJq.outerHeight();
          //设置layoutJq的宽度为0
          layoutJq.height(minHeight ? minHeight : 0);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.height(sibling.height() + outerHeight);
        }
      }

    },
    /**
     * 还原指定div的宽度为指定宽度
     * @param commp 需要调整的组件
     * @param width 需要展开的宽度
     * @param direction 需要展开的方向，e、s、w、n ，分为东南西北
     */
    reductionSpecifyCommpWidth(commp, width, direction){
      let layoutDiv = commp.$el.parentNode.parentNode;
      //生成jquery对象
      let layoutJq = jQuery(layoutDiv);
      //找layoutJq的第一个兄弟节点
      let sibling;
      if (!direction || direction == 'e' || direction == 's' ){
        sibling = $(layoutJq.next()[0]);
        if(direction == 'e'){
          layoutJq.width(width);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.width(sibling.width() - width);
        }else {
          layoutJq.height(width);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.height(sibling.height() - width);
        }
      }
      //方向为 w 和 n的延展
      else {
        sibling = $(layoutJq.prev()[0]);
        if (direction == 'w'){
          layoutJq.width(width);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.width(sibling.width() - width);
        }else {
          layoutJq.height(width);
          //设置兄弟节点的宽度为原来基础上加上outerWidth
          sibling.height(sibling.height() - width);
        }
      }

    }
  }
}
</script>

<style lang="less" scoped>
.outClass {
  width:100%;
  height:100%;
  .span1 {
    transition: all 0.2s;
  }

  .myDraLayOut {
    width: 100%;
    height: 100%;
    position: relative;
    .resizableRowDrawer {
      width: 100%;
      height: 100%;
      position: relative;
      .resizableRowContentDrawer {
        width: 100%;
        height: 100%;

        .resizableColDrawer {
          width: 100%;
          height: 100%;
          // display: left;
          .resizableColContentDrawer {
            width: 100%;
            height: 100%;
          }
        }
      }

    }
  }

  .imgright {
    position: absolute;
    left: 100%;
    //left: 15.9%;
    right: 83.2%;
    transition: all 0.3s;
    //animation: ltr-drawer-in .3s 2ms;
  }

  .imgright1 {
    left: 1px;
    //animation: ltr-drawer-in .3s 2ms;
    transition: all 0.3s;
  }

  .drawerClass ::v-deep .el-drawer__container .el-drawer .el-drawer__header {
    display: none;
  }


  .drawerClass ::v-deep .el-drawer__container .el-drawer.ltr {
    border: 0.2px solid #e5e5e5;
    box-shadow: none;
    bottom: 0px;
    height: 100%;
    //left: 24px
  }


  /deep/ .el-drawer__body {
    overflow: hidden
  }
}
</style>
